<template>
  <div id="app">
    <div id="boxs">


      <!-- <waht />
      <tail :arr="name"></tail>
      <tail :arr="name">
        <template v-slot="item" >
          {{item.row.b}}
        </template>
        <template #b>
          你在干嘛啊啊啊啊
        </template>
      </tail> -->

      <div id="head">TabBar 案例</div>
      <keep-alive>
          <!-- <component :is="rabbet" /> -->
          <router-view> </router-view>
      </keep-alive>
      

      
      <div id="tail">
          <button @click="$router.puth('goods-list')">商品列表</button>
          <button @click="$router.puth('/goods-search')">商品搜索</button>
          <button @click="$router.puth('/my-info') ">我的信息</button>
      </div>
      
      <!-- <dd />
      <aa />
      <cc />  -->

   <clot1>
        
      </clot1>
      
    </div>
  </div>
</template>

<script>

// import Waht from "./components/购物车waht.vue";
// import Tail from "./components/购物车tail.vue";
// import Tail from "./components/折叠.vue";
// import Ts from "./components/星星好评.vue";
// import dd from "./components/1.vue";
// import aa from "./components/2.vue";
// import cc from "./components/3.vue";
import clot1 from "./components/插槽中部.vue";
import clot2 from "./components/插槽尾部.vue";
import clot3 from "./components/插槽头部.vue";
export default {
  data () {
    return {
      // name :[
      //   {
      //       a:1,
      //       b:2   
      //   },  
      // ]
      
      
    }
  },
  name: 'App',
  components:{
    // Waht,
    // Tail,
    // Ts,
    // dd,
    // aa,
    // cc
    clot1,
    clot2,
    clot3,
  },
  // methods : {
  //   a () {
  //     if (this.value == 'Tail') {
  //         this.value = 'Ts'
  //     }else {
  //       this.value = 'Tail'
  //     }
  //   }
  // }
}
</script>

<style>
   #head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(0, 17, 255);
    
  }
  #tail {
    width: 100%;
    height: 50px;
    background-color: aquamarine;
    display:flex;
    justify-content: space-around;
    
  }
  button {
    border:none;
    background-color: aquamarine;
  }
  #app {
    display:flex;
    flex-direction: column;
    height:100vh;
    flex:1;
    
  }
  #boxs {
    width: 100%;
    height: 100vh;
    display:flex;
    flex-wrap: wrap;
  } 
 
</style>
